<!-- 评估模板列表公用组件 -->
<template>
  <t-row
    :gutter="[
      { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 },
      { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 },
    ]"
  >
    <t-col v-for="item in records" :key="item.id" :span="3">
      <div
        class="card-box"
        :class="{ 'is-active': isNeedChoose, 'is-choose': value.findIndex((i) => i.value === item.id) > -1 }"
        @click="clickHandle(item)"
      >
        <card title="" :headerBordered="false">
          <div class="card-box__top">
            <slot :item="item"></slot>
          </div>
          <div class="card-content">
            <div class="image">
              <img src="~@/assets/risk-assessment/template.png" alt="" />
            </div>
            <span class="title">{{ item.name }}</span>
            <span class="version">（版本号：V{{ item.version }}）</span>
          </div>
        </card>
      </div>
    </t-col>
  </t-row>
</template>

<script>
import Card from '@/components/Card/index.vue';

export default {
  name: 'EvaluationTemplate',
  components: { Card },
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    records: {
      type: Array,
      default() {
        return [];
      },
    },
    isNeedChoose: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    clickHandle(item) {
      if (!this.isNeedChoose) return;
      // const newArr = [...this.value];
      // const index = newArr.findIndex((i) => i.value === item.id);
      // if (index > -1) {
      //   newArr.splice(index, 1);
      // } else {
      //   newArr.push({ value: item.id, label: item.name });
      // }
      // this.$emit('input', newArr);
      this.$emit('input', [{ value: item.id, label: item.name }]);
    },
  },
};
</script>

<style lang="less" scoped>
.card-box {
  &.is-active {
    &:hover {
      /deep/ .t-card--bordered {
        background-color: #ecf2fe;
        cursor: pointer;
      }
    }
  }
  &.is-choose {
    /deep/ .t-card--bordered {
      background-color: #ecf2fe;
      border: 1px solid #0052d9;
    }
  }
  /deep/ .t-card__header {
    display: none !important;
  }
  .card-box__top {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    // .card-tag {
    //   transform: scale(0.8);
    // }
  }
  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      width: 100%;
      margin-top: 10px;
      text-align: center;
      font-weight: 600;
      font-size: 14px;
      color: #000000;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .version {
      font-weight: 600;
      font-size: 12px;
      color: #777777;
    }
    .image {
      width: 68px;
      height: 68px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
